<template>
  <div>
    <!-- 管理员信息弹窗 -->
    <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    title="管理员信息"
    width="500px"
    :show-close="true"
  >
    <div class="admin-info-dialog">
      <div class="admin-avatar-large">
        <span class="avatar-text-large">{{ adminInitials }}</span>
      </div>
      
      <div class="admin-info-details">
        <div class="info-item">
          <label>用户名：</label>
          <span>{{ adminInfo?.username || '未知' }}</span>
        </div>
        
        <div class="info-item">
          <label>真实姓名：</label>
          <span>{{ adminInfo?.realName || '未设置' }}</span>
        </div>
        
        <div class="info-item">
          <label>邮箱：</label>
          <span>{{ adminInfo?.email || '未设置' }}</span>
        </div>
        
        <div class="info-item">
          <label>电话：</label>
          <span>{{ adminInfo?.phone || '未设置' }}</span>
        </div>
        
        <div class="info-item">
          <label>状态：</label>
          <el-tag :type="adminInfo?.status === 'active' ? 'success' : 'danger'">
            {{ adminInfo?.status === 'active' ? '正常' : '禁用' }}
          </el-tag>
        </div>
        
        <div class="info-item">
          <label>最后登录时间：</label>
          <span>{{ formatDateTime(adminInfo?.lastLoginTime) }}</span>
        </div>
        
        <div class="info-item">
          <label>最后登录IP：</label>
          <span>{{ adminInfo?.lastLoginIp || '未知' }}</span>
        </div>
        
        <div class="info-item">
          <label>登录次数：</label>
          <span>{{ adminInfo?.loginCount || 0 }} 次</span>
        </div>
        
        <div class="info-item">
          <label>创建时间：</label>
          <span>{{ formatDateTime(adminInfo?.createdAt) }}</span>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <button class="cancel-btn" @click="$emit('update:visible', false)">
          <span class="btn-content">
            关闭
          </span>
        </button>
        <button class="primary-btn" @click="$emit('editAdmin')">
          <span class="btn-content">
            <span class="btn-icon">✏️</span>
            编辑信息
          </span>
        </button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑管理员信息弹窗 -->
  <el-dialog
    :model-value="editVisible"
    @update:model-value="$emit('update:editVisible', $event)"
    title="编辑管理员信息"
    width="500px"
    :show-close="true"
  >
    <el-form
      ref="editAdminFormRef"
      :model="editForm"
      :rules="editAdminRules"
      label-width="100px"
    >
      <el-form-item label="真实姓名" prop="realName">
        <el-input
          v-model="editForm.realName"
          placeholder="请输入真实姓名"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="邮箱" prop="email">
        <el-input
          v-model="editForm.email"
          placeholder="请输入邮箱地址"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="电话" prop="phone">
        <el-input
          v-model="editForm.phone"
          placeholder="请输入联系电话"
          maxlength="20"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <button class="cancel-btn" @click="$emit('update:editVisible', false)">
          <span class="btn-content">
            <span class="btn-icon">↩️</span>
            取消
          </span>
        </button>
        <button class="primary-btn" @click="handleSubmit" :disabled="submitLoading">
          <span v-if="!submitLoading" class="btn-content">
            <span class="btn-icon">💾</span>
            保存修改
          </span>
          <span v-else class="btn-loading">
            <span class="loading-spinner"></span>
            保存中...
          </span>
        </button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  editVisible: {
    type: Boolean,
    default: false
  },
  adminInfo: {
    type: Object,
    default: () => ({})
  },
  submitLoading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'update:editVisible', 'editAdmin', 'submitEdit'])

const editAdminFormRef = ref()
const editForm = ref({
  realName: '',
  email: '',
  phone: ''
})

// 表单验证规则
const editAdminRules = {
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
    { min: 2, max: 50, message: '姓名长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
}

// 计算管理员姓名首字母
const adminInitials = computed(() => {
  if (props.adminInfo?.realName) {
    return props.adminInfo.realName.charAt(0).toUpperCase()
  } else if (props.adminInfo?.username) {
    return props.adminInfo.username.charAt(0).toUpperCase()
  }
  return 'A'
})

// 监听编辑弹窗显示，初始化表单数据
watch(() => props.editVisible, (newVal) => {
  if (newVal) {
    editForm.value = {
      realName: props.adminInfo?.realName || '',
      email: props.adminInfo?.email || '',
      phone: props.adminInfo?.phone || ''
    }
  }
})

// 格式化函数
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '未知'
  
  try {
    const date = new Date(dateTimeStr)
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  } catch (error) {
    return '格式错误'
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!editAdminFormRef.value) return
  
  try {
    await editAdminFormRef.value.validate()
    emit('submitEdit', editForm.value)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
</script>

<style scoped>
/* 管理员信息弹窗 */
.admin-info-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.admin-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.avatar-text-large {
  color: white;
  font-size: 32px;
  font-weight: bold;
}

.admin-info-details {
  width: 100%;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item label {
  font-weight: 600;
  color: #666;
  min-width: 120px;
}

.info-item span {
  color: #333;
  text-align: right;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

/* 自定义按钮样式 */
.primary-btn {
  padding: 12px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
  min-width: 120px;
}

.primary-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.primary-btn:active:not(:disabled) {
  transform: translateY(0);
}

.primary-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.cancel-btn {
  padding: 12px 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: #666;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 120px;
}

.cancel-btn:hover {
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cancel-btn:active {
  transform: translateY(0);
}

.btn-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-icon {
  font-size: 1rem;
}

.btn-loading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 表单样式 */
.el-form {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dialog-footer {
    flex-direction: column;
    gap: 10px;
  }
  
  .primary-btn, .cancel-btn {
    width: 100%;
    min-width: auto;
    padding: 10px 16px;
    font-size: 0.9rem;
    min-height: 40px;
  }
}
</style> 